{% extends "admin/layout.html" %}

{% block content %}
<!-- Page Wrapper -->
<div id="wrapper">

{% include "admin/_slidebar.html"%}

<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">

  <!-- Main Content -->
  <div id="content">

    {% include "admin/_topbar.html"%}

    <!-- Begin Page Content -->
    <div class="container-fluid">
      {% include 'admin/_messages.html' %}

      <!-- DataTales Example -->
      <div class="card shadow mb-4">
        <div class="card-header py-3">
          <a class="m-0 font-weight-bold text-primary">Phase {{phase.name}} - {{phase.plant.name}} </a>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
              <thead>
                <tr>
                  <th>Plant Name</th>
                  <th>Phase Name</th>
                  <th>Number of Features</th>
                  <th>Features</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                    <tr>
                      <td>{{phase.plant.name}}</td>
                      <td>{{phase.name}}</td>
                      <td>{{phase.features|list|count}}</td>
                      <td>
                        {% for feature in phase.features | sort(attribute='id') %}
                          <div style="white-space:pre;"><a>{{feature.name}}</a>  <span style="margin: auto;padding: 10px;"><a class="delete" title="Delete Feature From Phase" data-toggle="modal" data-target="#deletePhaseFeature" data-phase-id="{{phase.id}}" data-feature-id="{{feature.id}}" href="#"><i class="material-icons">&#xE872;</i></a></span></div>
                        {% endfor %}
                      </td>
                        <td>
                            <a class="add" title="Add Feature" data-toggle="modal" data-target="#addPhaseFeature" href="#"><i class="material-icons">&#xE03B;</i></a>
                        </td>

                    </tr>
              </tbody>
            </table>
            <a title="Back to plant page" href="{{url_for('admin.show_plants')}}"><i class="material-icons">arrow_back</i></a>
          </div>
        </div>
      </div>

    </div>
    <!-- /.container-fluid -->

  </div>
  <!-- End of Main Content -->

  {% include 'admin/_footer.html' %}

</div>
<!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>

<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
      <button class="close" type="button" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
    </div>
    <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
    <div class="modal-footer">
      <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
      <a class="btn btn-primary" href="{{ url_for('logout') }}">Logout</a>
    </div>
  </div>
</div>
</div>

<!--add phase_feature modal-->
  <div class="modal fade" id="addPhaseFeature" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="add-phase_feature-modal">Add Feature to this phase</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" id="add-phase_feature-x">×</span>
        </button>
      </div>
      {% if add_phase_feature_form.feature_id.choices|list|count() != 0 %}

      <form action="{{url_for('admin.add_feature2phase', id=phase.id)}}"  method="post" id="add-phase_feature-form">
        {{add_phase_feature_form.csrf_token()}}
      <div class="modal-body">
        <div class="form-group">
            <div>Feature: </div>
			<div class="input-group">

                {{add_phase_feature_form.feature_id(class_="form-control")}}

            </div>
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal" id="add-phase_feature-cancel">Cancel</button>
        <input class="btn btn-primary" type="submit" value="Save" />
      </div>
      </form>

      {% else %}
        <div class="modal-body">
          <p>No feature available</p>
        </div>
      {% endif %}
    </div>
    </div>
  </div>

<!--delete phase_feature modal-->
  <div class="modal fade" id="deletePhaseFeature" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="delete-phase-modal">Confirm</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">Select "Confirm" below if you want to remove this feature from this phase
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
        <a class="btn btn-primary" name="confirm" href="" >Confirm </a>
      </div>
    </div>
    </div>
  </div>

<script src="{{url_for('static', filename='phase_detail.js')}}"></script>
{% endblock %}